<template>
	<view>
		<view class="title" @click="open('ttext')">{{text1}}</view>
		<view class="info">发端于一个产品，进而生成为基础设施，并被赋予新金融服务模式的憧憬，中国金融科技的演进之路虽经历颠簸，却不改蓬勃之势。如今，经历祛魅之后，市场重新划归理性赛道</view>
		<view class="text" @click="open('tmadetext')">2019年末暴发新冠疫情，金融科技的力量再次凸显。</view>
		<image src="../../static/images/b1.jpg" mode="widthFix" @click="open('timg')"></image>
		<!-- <jin-edit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#"></jin-edit> -->
		<!-- 修改 -->
		<uni-transition :duration="500" :mode-class="modeClass" :show="tmadetext" class="madetext">
			<view class="mitem">插文字<text class="iconfont icon-wenzi"></text></view>
			<view class="mitem">改文字<text class="iconfont icon-weibiaoti111"></text></view>
			<view class="mitem">插图片<text class="iconfont icon-tupian"></text></view>
			<view class="mitem">插链接<text class="iconfont icon-Shape"></text></view>
			<view class="mitem">水平线<text class="iconfont icon-shuipingxian"></text></view>			
			<view class="mitem">删除<text class="iconfont icon-shanchu"></text></view>
			<view class="mitem">撤销<text class="iconfont icon-rotate-ccw"></text></view>
			<view class="mitem">缩进<text class="iconfont icon-suojin"></text></view>
			<view class="mitem">还原缩进<text class="iconfont icon-rotate-ccw"></text></view>
			<view class="mitem" v-if="timg">反转图片<text class="iconfont icon-fanzhuanxiangji"></text></view>
			<view class="mitem" v-if="timg">还原图片<text class="iconfont icon-rotate-ccw"></text></view>
			<view class="mitem" @click="onTap">取消<text class="iconfont icon--"></text></view>
		</uni-transition>
		<!-- 标题过渡 -->
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass"  :show="ttext" >
			<!-- 遮罩 -->
			<uni-transition :mode-class="['fade']" :styles="maskClass" @click="onTap" :show="show"/>
			<view class="box">
				<view class="box_title">
					<text>内容修改</text>
				</view>
				<view class="box_input">
					<textarea  v-model="change1" placeholder="请输入内容"></textarea>
				</view>				
				<view class="box_btn">
					<view @click="onTap">取消</view>
					<view @click="onChange">确定</view>
				</view>
			</view>
		</uni-transition>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 弹出框
				show: false,
				ttext: false,
				timg:false,
				tmadetext:false,
				modeClass: ['fade'],
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'display': 'flex',
					'justify-content': 'center',
					'align-items': 'center'
				},
				change1:'',
				text1:'蚂蚁上市，巨头转身：金融科技重装上阵｜《财经》封面',
				timage:''
			}
		},
		methods: {
			// 弹出框
			open(ttype) {
				if(ttype == 'ttext'){
					this.ttext = true,
					this.show = true
				}else if(ttype == 'tmadetext'){
					this.tmadetext = true,
					this.timg = false
				}else{
					this.tmadetext = true,
					this.timg = true
				}
				this.change1 = this.text1
			},
			// 关闭框
			onTap() {
				this.ttext = false,
				this.tmadetext = false
			},
			onChange(){
				this.ttext = false,
				this.text1 = this.change1
			},
			editOk(res) {
			    console.log(res);
			}
		}
	}
</script>

<style  lang="scss">
@import 'uni2.scss';	
page{
	padding: 20rpx;
}
.title,.info,.text,image{
	margin-bottom: 20rpx;
}
.title{
	font-size: 30rpx;
	font-weight: bold;
}
image{
	width: 100%;
}
.box{
	width: 90vw;	
	background: #fff;
	border-radius: 10rpx;
	color: #555;	
	position: relative;
}
.box_title{
	line-height: 40rpx;
	font-size: 30rpx;
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
}
.box_title text{
	font-size: 35rpx;
}
.box_input{
	padding: 40rpx 20rpx;
	border-bottom:1px solid #eee;
}
.box_input textarea{
	width: 100%;
	line-height: 50rpx;
	height: 300rpx;
	border: 0;
}
.box_btn{
	line-height: 100rpx;
	display: flex;
}
.box_btn view{
	width: 50%;
	text-align: center;
}
.box_btn view:last-of-type{
	border-left: 1px solid #eee;
	color: blue;
}
.madetext{
	width: 95vw;
	height: 300rpx;
	position: fixed;
	top: 20rpx;
	left: 0;
	right: 0;
	margin: auto;
	background: #f0f6fb;
	box-shadow: 0 5rpx 10rpx 10rpx rgba(0,0,0,.1);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 20rpx 20rpx 0 20rpx;
}
.mitem{
	width: 32%;
	text-align: center;
	background: #fff;
	line-height: 57rpx;
	margin-bottom: 20rpx;
	position: relative;
}
.mitem .iconfont{
	position: absolute;
	left: 20rpx;
	top: 3rpx;
	font-size: 28rpx;
}
.mitem .icon-suojin{
	font-size: 32rpx;
}
</style>
